<div class="row">
	<div class="col-xs-12">
		<div class="box">
			<!-- /.box-header -->
			<div class="box-body">
				<div style="padding-bottom: 5px;">
					<a onclick="fnClickAddRow();" href="javascript:void(0);"
						class="btn btn-primary " data-toggle="modal"
						data-target="#myModal">添加主机</a>
				</div>
				<table id="example1" class="table table-bordered table-hover"
					style="font-size: 12px;">
					<thead>
						<tr>
							<th>id</th>
							<th>Host Name</th>
							<th>IP</th>
							<th>Cores</th>
							<th>Memory</th>
							<th>SSH login</th>
							<th>Usage</th>
							<th>location</th>
							
						</tr>
					</thead>
				</table>
			</div>
			<!-- /.box-body -->
		</div>
		<!-- /.box -->
	</div>
	<!-- /.col -->
</div>
<!-- /.row -->
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
	aria-labelledby="myModalLabel">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"
					aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
				<h4 class="modal-title" id="myModalLabel">添加主机</h4>
			</div>
			<div class="modal-body">
				<!-- Horizontal Form -->
		          <div class="box box-info" style="margin-bottom:0px;">
		            <!-- form start -->
		            <form class="form-horizontal">
		              <div class="box-body">
		                <div class="form-group">
		                  <label for="hostName" class="col-sm-2 control-label">Host Name</label>
		                  <div class="col-sm-10">
		                    <input type="text" class="form-control" id="hostName" >
		                  </div>
		                </div>
		                <div class="form-group">
		                  <label for="ip" class="col-sm-2 control-label">IP</label>
		                  <div class="col-sm-10">
		                    <input type="text" class="form-control" id="ip"  >
		                  </div>
		                </div>
		                <div class="form-group">
		                  <label for="rootpass" class="col-sm-2 control-label">Root Password</label>
		                  <div class="col-sm-10">
		                    <input type="text" class="form-control" id="rootpass"  >
		                  </div>
		                </div>
		                <div class="form-group">
		                  <label for="cores" class="col-sm-2 control-label">Cores</label>
		                  <div class="col-sm-10">
		                    <input type="text" class="form-control" id="cores"  >
		                  </div>
		                </div>
		                <div class="form-group">
		                  <label for="memory" class="col-sm-2 control-label">Memory</label>
		                  <div class="col-sm-10">
		                    <input type="text" class="form-control" id="memory"  >
		                  </div>
		                </div>
		                <div class="form-group">
		                  <label for="location" class="col-sm-2 control-label">Location</label>
		                  <div class="col-sm-10">
		                    <input type="text" class="form-control" id="location"  >
		                  </div>
		                </div>
		                
		              </div>
		              <!-- /.box-body -->
		            </form>
		          </div>
		          <!-- /.box -->
			</div>
			<div class="modal-footer">
				<span style="float:left;" id="addResult"></span>
				<button type="button" class="btn btn-default" data-dismiss="modal">关<span style="padding-left: 12px" />闭
				</button>
				<button type="button" class="btn btn-primary" id="saveHost">保<span style="padding-left: 12px" />存
				</button>
			</div>
		</div>
	</div>
</div>


<script type="text/javascript">
	// To make Pace works on Ajax calls
	$(document).ajaxStart(function() { Pace.restart(); });
	hostList();
	function hostList(){
		$('#example1').DataTable({
	        "ajax":"/host/1",
	        "columns": [
	        			{ "data": "id" },
	        			{ "data": "hostName" },
	        			{ "data": "ip" },
	        			{ "data": "cores" },
	        			{ "data": "memory" },
	        			{ "data": "sshLogin" },
	        			{ "data": "usageFlag" },
	        			{ "data": "location" }
		       		],
	       		"buttons": [
	       		          {
	       		              text: 'Reload',
	       		              action: function ( e, dt, node, config ) {
	       		                  dt.ajax.reload();
	       		              }
	       		          }
	       		      ]
	    });
	}
	$('form :input').blur(function(){
        var $parent = $(this).parent();
        $parent.find(".formtips").remove();
        //验证hostName
        if( $(this).is('#hostName') ){
               if( this.value=="" || this.value.length > 32 ){
                   var errorMsg = '不能为空！';
                   $parent.append('<span class="formtips onError" style="color:#FF0000">'+errorMsg+'</span>');
               }
        }
        //验证ip
        if( $(this).is('#ip') ){
        	var re=/^(\d+)\.(\d+)\.(\d+)\.(\d+)$/g //匹配I
           if( this.value=="" ||!re.test($("#ip").val())){
                 var errorMsg = '请输入正确的IP地址.';
                 $parent.append('<span class="formtips onError" style="color:#FF0000">'+errorMsg+'</span>');
           }
        }
        
      //验证rootpass
        if( $(this).is('#rootpass') ){
           if( this.value=="" || this.value.length <5 ){
                 var errorMsg = '请输入至少4位的密码.';
                 $parent.append('<span class="formtips onError" style="color:#FF0000">'+errorMsg+'</span>');
           }
        }
      
      //验证cores
        if( $(this).is('#cores') ){
           if(this.value=="" || this.value.length > 4){
                 var errorMsg = '长度不能超过4位。';
                 $parent.append('<span class="formtips onError" style="color:#FF0000">'+errorMsg+'</span>');
           }
        }
      //验证memory
        if( $(this).is('#memory') ){
           var z= /^[0-9]*$/;
           if( this.value=="" ||!z.test($("#memory").val())){
                 var errorMsg = '请输入0-9数字';
                 $parent.append('<span class="formtips onError" style="color:#FF0000">'+errorMsg+'</span>');
           }
        }
      //验证location
        if( $(this).is('#location') ){
           if( this.value==""){
                 var errorMsg = '不能为空！.';
                 $parent.append('<span class="formtips onError" style="color:#FF0000">'+errorMsg+'</span>');
           }
        }
        
   }).keyup(function(){
      $(this).triggerHandler("blur");
   }).focus(function(){
        $(this).triggerHandler("blur");
   });
    
    $("#saveHost").click(function(){
    	
    	var _hostName=$("#hostName").val();
        var _ip=$("#ip").val();
        var _rootpass=$("#rootpass").val();
        var _cores=$("#cores").val();
        var _memory=$("#memory").val();
        var _location=$("#location").val();
        
    	$("form :input.form-control").trigger('blur');
        var numError = $('form .onError').length;
        if(numError){
            return false;
        }else{
        	$.ajax({
        	    url:"/host/addhost",
        	    type: "GET",
        	    dataType:"text",
        	    data:{
        	    	hostname:_hostName,
        	    	ip:_ip,
        	    	rootpass:_rootpass,
        	    	cores:_cores,
        	    	memory:_memory,
        	    	location:_location
        	    },
        	    success: function(data){
        	    	if(data==1){
        	    		$("#addResult").html("添加成功");
        	    	}else{
        	    		$("#addResult").html("添加失败");
        	    	}
        	    }
        	});
        }
    });
    
</script>
